<template>
  <el-card shadow="hover">
    <el-form>
      <el-form-item>
        <el-input placeholder="用户名" class="user-inp" />
        <el-button type="primary" :icon="Search" class="ml-20">
          查询
        </el-button>
        <el-button> 清空 </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="mt-20" @click="showDialog">
          添 加
        </el-button>
        <el-button type="danger" class="mt-20"> 批量删除 </el-button>
      </el-form-item>
      <el-table :data="userList" border v-loading="loading">
        <el-table-column type="selection" />
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="用户昵称" prop="nickName" />
        <el-table-column label="角色列表" prop="roleName" />
        <el-table-column label="创建时间" prop="gmtCreate" />
        <el-table-column label="更新时间" prop="gmtModified" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="info" :icon="User" size="small" />
            <el-button type="primary" :icon="Edit" size="small" />
            <el-button type="danger" :icon="Delete" size="small" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-20"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9, 12]"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @size-change="getUserList"
        @current-change="getUserList"
      />
      <el-dialog v-model="dialogVisible" title="添加用户" width="50%">
        <el-form
          label-width="100px"
          :model="userFormData"
          :rules="userFormRules"
          ref="userRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              placeholder="请输入用户名"
              v-model="userFormData.username"
            />
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickName">
            <el-input
              placeholder="请输入用户昵称"
              v-model="userFormData.nickName"
            />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input
              placeholder="请输入用户密码"
              v-model="userFormData.password"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addOrUpdateUserList">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CUser",
};
</script>

<script lang="ts" setup>
import { Search, User, Edit, Delete } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import { getUserApi, addUserApi } from "@/api/acl/user";
// import type { addUserList } from "@/api/acl/model/roleModel";
import type { UserList } from "@/api/acl/model/userModel";
import { ElMessage } from "element-plus";

// 当前页码
const currentPage = ref<number>(1);
// 每页条数
const pageSize = ref<number>(5);
// 总页数
const total = ref<number>(0);
// 定义loading效果
const loading = ref(false);

const userList = ref<UserList>([]);

const getUserList = async () => {
  loading.value = true;
  const res = await getUserApi(currentPage.value, pageSize.value);
  // console.log(res);
  userList.value = res.items;
  total.value = res.total;
  loading.value = false;
};

onMounted(getUserList);

const dialogVisible = ref(false);

// 定义表单数据
const userFormData = reactive({
  // 参数名来源于接口文档
  // 品牌名称
  username: "",
  // 品牌LOGO
  password: "",
  nickName: "",
});

// 定义表单校验规则
const userFormRules = reactive({
  // 表单校验规则名称必须和数据名称一致
  username: [
    {
      required: true, //必填项
      message: "请输入品牌名称", //错误提示信息
      trigger: "blur", //触发表单校验时机，失去焦点
    },
    {
      min: 2,
      max: 20,
      message: "名称只允许2-10位",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true, //必填项
      message: "请输入密码", //错误提示信息
      trigger: "blur", //触发表单校验时机，失去焦点
    },
    {
      min: 2,
      max: 20,
      message: "密码只允许2-10位",
      trigger: "blur",
    },
  ],
  nickName: [
    {
      required: true, //必填项
      message: "请输入品牌名称", //错误提示信息
      trigger: "blur", //触发表单校验时机，失去焦点
    },
    {
      min: 2,
      max: 20,
      message: "名称只允许2-10位",
      trigger: "blur",
    },
  ],
});
// 获取el-form组件实例对象，以便后面使用它身上的方法
const userRef = ref();

// const { username, password, nickName } = userFormData;
// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm("确定要关闭吗?")
//     .then(() => {
//       console.log(username, password, nickName);

//       done();
//     })
//     .catch(() => {
//       // catch error
//     });
// };

const addOrUpdateUserList = async () => {
  // 1.校验整个表单
  await userRef.value.validate();
  // 2.校验通过，发送请求，校验不通过走不到这里来
  const { username, password, nickName } = userFormData;

  await addUserApi({ username, password, nickName });
  // 添加品牌成功响应用户
  ElMessage.success("添加品牌成功");
  // 添加或修改成功后关闭对话框
  dialogVisible.value = false;
  // 添加完成后应该刷新页面
  getUserList();
};

const showDialog = () => {
  dialogVisible.value = true;
};
</script>

<style scoped>
.user-inp {
  width: 200px;
}
</style>
